<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/common.css?v=1.0.0" />
    <link rel="stylesheet" href="css/main.css?v=1.0.0">
    <script src="js/rem.js"></script>
    <script src="js/zepto.js"></script>
    <title>财富中心</title>
</head>

<body>
    <div class="header">
        <img src="img/left-white.png" alt="">
        <span class="header-title">我的水站</span>
    </div>
    <div class="myw-container container">
        <div class="nav">
            <span class="active">全部</span>
            <span>已下单</span>
            <span>配送中</span>
            <span>已完成</span>
        </div>
        <div class="myw-con v-load">
            <div class="myw-wrap">
                <div class="title">
                    <span class="dot"></span>
                    <span class="times">2018.12</span>
                </div>
                <div class="con">
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                        <div class="item-info">
                            <div>
                                <img src="img/shizhong.png" alt="">
                                <span>下单时间 : </span>
                                <span class="year">2018-10-31</span>
                                <span class="min">14:00:00</span>
                            </div>
                            <button class="myw-btn btn-small over">已完成</button>
                            <!--<button class="myw-btn btn-small dispatching">配送中</button>-->
                            <!--<button class="myw-btn btn-small pay">已下单</button>-->
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                        <div class="item-info">
                            <div>
                                <img src="img/shizhong.png" alt="">
                                <span>下单时间 : </span>
                                <span class="year">2018-10-31</span>
                                <span class="min">14:00:00</span>
                            </div>
                            <button class="myw-btn btn-small dispatching">配送中</button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                        <div class="item-info">
                            <div>
                                <img src="img/shizhong.png" alt="">
                                <span>下单时间 : </span>
                                <span class="year">2018-10-31</span>
                                <span class="min">14:00:00</span>
                            </div>
                            <button class="myw-btn btn-small pay">已下单</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="more-product myw-wrap">
                <div class="title">
                    <span class="dot"></span>
                    <span class="times">2018.11</span>
                </div>
                <div class="con">
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                    </div>
                </div>
                <div class="item-info">
                    <div>
                        <img src="img/shizhong.png" alt="">
                        <span>下单时间 : </span>
                        <span class="year">2018-10-31</span>
                        <span class="min">14:00:00</span>
                    </div>
                    <button class="myw-btn btn-small over">已完成</button>
                </div>
            </div>
        </div>
        <div class="loadmore"><img src="img/loadmore.jpg" alt=""></div>
    </div>
    <div class="place"></div>
    <div class="tab-bar">
        <a class="tab home" href="">
            <span><img src="img/tab-bar01.png" alt=""></span>
            <span>首页</span>
        </a>
        <a class="tab active" href="recommend.html">
            <span><img src="img/tab-bar02-active.png" alt=""></span>
            <span>推荐</span>
        </a>
        <a class="tab " href="my.html">
            <span><img src="img/tab-bar03.png" alt=""></span>
            <span>我的</span>
        </a>
    </div>
</body>

</html>
<script src="js/main.js?v=1.0.0"></script>
<script>
        let flag = true;
        let mock = null;
        //滚动加载函数
        function loadmore(height = 200, callback) {
            $(window).scroll(function () {
                let scrollTop = $(this).scrollTop();
                let scrollHeight = $(document).height();
                let windowHeight = $(this).height();
                console.log(scrollTop, scrollHeight, windowHeight)
                if (scrollTop + windowHeight + height >= scrollHeight) {
                    if (flag) {
                        flag = !flag
                        console.log('开始ajax请求,请求完成变成1')
                        callback()
                    }
                }
            });
        }
        // 调用加载
        loadmore(300, ajaxData)
        // 后台接口加载数据函数
        function ajaxData() {
            setTimeout(function () {
                flag = !flag //必备
                console.log('我变成1了');
                $('.v-load').append(mock)
            }, 1000)
        }
        // 模拟数据
        function mockData() {
            mock =
                `
                <div class="myw-wrap">
                <div class="title">
                    <span class="dot"></span>
                    <span class="times">2018.12</span>
                </div>
                <div class="con">
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                        <div class="item-info">
                            <div>
                                <img src="img/shizhong.png" alt="">
                                <span>下单时间 : </span>
                                <span class="year">2018-10-31</span>
                                <span class="min">14:00:00</span>
                            </div>
                            <button class="myw-btn btn-small over">已完成</button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                        <div class="item-info">
                            <div>
                                <img src="img/shizhong.png" alt="">
                                <span>下单时间 : </span>
                                <span class="year">2018-10-31</span>
                                <span class="min">14:00:00</span>
                            </div>
                            <button class="myw-btn btn-small dispatching">配送中</button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-con">
                            <div><img src="img/wl-img01.jpg" alt=""></div>
                            <p>峨眉钰泉 深层1652米饮用天然矿泉水 低钠淡矿泉水15.12LX桶</p>
                        </div>
                        <div class="item-info">
                            <div>
                                <img src="img/shizhong.png" alt="">
                                <span>下单时间 : </span>
                                <span class="year">2018-10-31</span>
                                <span class="min">14:00:00</span>
                            </div>
                            <button class="myw-btn btn-small pay">已下单</button>
                        </div>
                    </div>
                </div>
            </div>
    
            `
    
    
        }
        mockData()
    </script>